<template>
  <div>
    <div class="search-box" v-if="!nones">
      <div class="all-food" v-loading="loading">
        <ul>
          <li v-for="(item, index) in searchList" :key="index">
            <div class="foodimgb" @click="queryFood(index)">
              <a :href="imgHref + item.fid"><img :src="item.fimg" alt="" /></a>
            </div>
            <a :href="imgHref + item.fid">
              <div class="foodname" @click="queryFood(index)">
                {{ item.fname }}
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="pagination dibua">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="20"
          :currentPage="curPage"
          @current-change="page"
        >
        </el-pagination>
      </div>
    </div>
    <div class="weizhaodao" v-else>
      <img src="../../assets/img/weizhaodao.svg" alt="" />
      <div class="searchText">
        未找到关于
        <span class="footName"> {{ $route.query.footName }}</span> 的食物
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "SearchResult",
  data() {
    return {
      searchList: "",
      curPage: 1,
      total: 0,
      imgHref: "/showfood?fid=",
      nones: "",
    };
  },
  created() {
    if (this.$route.query.page != undefined) {
      this.curPage = this.$route.query.page;
    }
    request({
      url: "/firstpage/queryLikeFoot",
      params: {
        footName: this.$route.query.footName,
        pageNum: this.curPage,
      },
    })
      .then((res) => {
        this.total = res.data.data.length;
        this.searchList = res.data.data;
        if (res.data.data.length == 0) {
          this.nones = true;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    page(currentPage) {
      request({
        url: "/foot/queryAllFoot",
        params: {
          pageNum: currentPage,
        },
      })
        .then((res) => {
          this.allFood = res.data.data.list;
          this.total = res.data.data.total;
          this.$router.push({
            path: "/sortpage",
            query: {
              page: currentPage,
            },
          });
          location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.search-box {
  width: 100%;
  margin: 0 auto;
  margin-top: 1.1rem;
  display: flex;
  font-size: 1.2rem;
  flex-wrap: wrap;
}

.search-box a {
  text-decoration: none;
  color: #000;
}

.weizhaodao {
  font-size: 0.2rem;
  margin: 0 auto;
  transform: translateY(70%);
  text-align: center;
}

.searchText {
  font-size: 0.15rem;
  margin-top: 0.1rem;
}

.footName {
  color: red;
}

.dibua {
  margin-bottom: 0.5rem;
}
</style>